<!-- 保函文本确认 -->
<template>
  <div class="square">
    <img  src="@/assets/images/u35.png"/>
  </div>
  <div class="footer">
    <el-button plain @click="">申请修改保函文本</el-button>
    <el-button type="danger" @click="handleConfirm">我已确认保函文本</el-button>
  </div>
</template>

<script setup>
// 切换指定组件
const toComponent = inject('toComponent')
function handleConfirm() {
  toComponent()
}
</script>

<style lang="scss" scoped>
.square{
  height: 700px;
  border: 6px solid #FC7000;
  border-radius: 6px;
  overflow: hidden auto;
  box-sizing: border-box;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  margin: 0 120px;
  img{
    width: 100%;
  }
}
.footer{
  margin-top: 30px;
  display: flex;
  justify-content: center;
  :deep(.el-button){
    width: 287px;
    height: 102px;
    font-weight: 700;
    font-size: 30px;
    border-radius: 10px;
    &.is-plain{
      color: #FF0606;
      border: 2px solid rgba(121, 121, 121, 1);
      filter: drop-shadow(0px 0px 2.5px rgba(0, 0, 0, 0.34901960784313724));
    }
    &.el-button--danger{
      color: #F9F9F9;
      background-color: #FF141A;
    }
    & + .el-button {
      margin-left: 100px;
    }
  }
}
</style>
